<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family:"Segoe UI";
        }
        li{
            list-style:none;
        }
        a{
            text-decoration:none;
        }
        .pagination {
            position: relative;

        }
        .pagination li{
            display: inline-block;
            margin:0 5px;
        }
        .pagination li a{
            padding:.5rem 1rem;
            display:inline-block;
            border:1px solid #ddd;
            background:#fff;

            color:#0E90D2;
        }
        .pagination li a:hover{
            background:#eee;
        }
        .pagination li.active a{
            background:#0E90D2;
            color:#fff;
        }
    </style>
<body>

<div id="counter-event-example">
    <p>{{ total }}</p>
    <button-counter v-on:ee="incrementTotal" :page="page"></button-counter>
</div>

<script type="text/x-template" id="page">
    <ul class="pagination" >
        <li v-show="current != 1" @click="current-- && goto(current)" ><a href="javascript:void(0)">上一页</a></li>
        <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
            <a href="javascript:void(0)" >{{index}}</a>
        </li>
        <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="javascript:void(0)" >下一页</a></li>
    </ul>
</script>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('button-counter', {
        template:"#page",
        data:function(){
            return{
                current:0,
                showItem:0,
                allpage:0
            }
        },
        props:['page'],
        mounted() {
            this.initdata()
        },
        computed:{
            pages:function(){
                var pag = [];
                if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
                    //总页数和要显示的条数那个大就显示多少条
                    var i = Math.min(this.showItem,this.allpage);
                    while(i){
                        pag.unshift(i--);
                    }
                }else{ //当前页数大于显示页数了
                    var middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
                            i = this.showItem;
                    if( middle >  (this.allpage - this.showItem)  ){
                        middle = (this.allpage - this.showItem) + 1
                    }
                    while(i--){
                        pag.push( middle++ );
                    }
                }
                return pag
            }
        },
        methods:{
            goto:function(index){
                if(index == this.current) return;
                this.current = index;
                //这里可以发送ajax请求
                this.$emit('ee',this.current )
            },
            initdata:function(){
                this.current=this.page.current
                        this.showItem=this.page.showItem
                        this.allpage=this.page.allpage
            }
        }
    })
    new Vue({
        el: '#counter-event-example',
        data: {
            total: 'arg',
            page:{
                current:0,
                showItem:0,
                allpage:0,
                url:""
            }
        },
        created() {
//            页面初始化加载原始数据
            this.initData()
        },
        methods: {
            incrementTotal: function (b) {
//                激活事件回调加载
                this.page.current=b
                this.getajaxdata()
            },
            initData:function(){
                this.page.current=1
                this.page.showItem=10
                this.page.allpage=5
                this.page.url="http://www.xxx.xxx"
                this.getajaxdata()
            },
            getajaxdata:function(){
                this.total="当前访问的请求地址为："+this.page.url+"/"+this.page.current

            }
        }
    })
</script>
</body>